<template>
  <view class="searchPage">
    <!-- 顶部搜索框 -->
    <view class="box">
      <uni-search-bar v-model="val" class="bar" radius="40" cancelButton="none" @confirm="myconfirm"
        @input="myinput"></uni-search-bar>
    </view>
    <view class="thinkList" v-if="val">
      <view class="item" v-for="(item, index) in list" :key="index" @click="goDetail(item.goods_id)">
        <text>{{item.goods_name}}</text>
        <uni-icons type="right" size="16"></uni-icons>
      </view>
    </view>
    <!-- 搜索历史 -->
    <view class="history" v-else>
      <view class="title">
        <text>搜索历史</text>
        <!--    <navigator url="" open-type="">   -->
        <uni-icons type="trash" @click="clearEvent"></uni-icons>
        <!-- </navigator> -->
      </view>
      <view class="itembox">
        <view class="item" @click="goList(item)" v-for="(item, index) in historyList" :key="index">
          {{item}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  /*
  防抖：倒计时执行某事件，倒计时过程中如果请求执行该事件，清除倒计时，重新倒计时执行该事件
  节流：倒计时执行某事件，倒计时过程中如果请求执行该事件，直接return不理
  */
  export default {
    data() {
      return {
        timer: null,
        isLoading: false,
        val: '',
        list: [],
        // vuex持久化：  存:mutations   取:state  
        historyList: uni.getStorageSync('history') || []
      };
    },
    methods: {
      myinput(e) {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.inputEvent(e)
        }, 500)
        // if (this.isLoading) {
        //   return
        // }
        // this.isLoading = true
        // setTimeout(() => {
        //   this.inputEvent()
        // }, 500)
      },
      myconfirm() {
        console.log('myconfirm');
        /*
        1：跳转到商品列表页
        2：存储搜索关键字
        3：关键字列表要渲染出来
        4：历史要做持久化处理
           存：值改变了就存储
           取：初始值取
        */
        uni.navigateTo({
          url: '/pages/list/list?key=' + this.val
        })
        this.historyList.unshift(this.val)
        // 数组去重
        // Set  
        // this.historyList = [...new Set(this.historyList)]        
        // filter
        this.historyList = this.historyList.filter((item, index, initArr) => {
          // [1,1,2]
          // 1:0  [1]
          // 1:1   [1]
          // 2:2    [1,2]
          const _index = initArr.findIndex(i => i === item)
          return _index === index
        })

        uni.setStorageSync('history', this.historyList)
        // 清理输入框内容
        this.val = ''
        this.list = []

      },
      async inputEvent(e) {
        if (e.trim() === '') {
          return
        }
        uni.showLoading({
          title: '加载中....'
        })
        const {
          message
        } = await uni.$http.get('/goods/search', {
          data: {
            query: e,
            pagenum: 1,
            pagesize: 15
          }
        })
        this.list = message.goods
        uni.hideLoading()
        console.log('列表:', message);
        // this.isLoading = false
      },
      // 跳转到商品详情
      goDetail(id) {
        uni.navigateTo({
          url: '/pages/goods_detail/main?goods_id=' + id
        })
        // 清理输入框内容
        this.val = ''
        this.list = []
      },
      // 清除
      clearEvent() {
        this.historyList = []
        // uni.setStorageSync
        // uni.getStorageSync
        // uni.removeStorageSync
        uni.removeStorageSync('history')
      },
      goList(name) {
        uni.navigateTo({
          url: "/pages/list/list?key=" + name
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .searchPage {
    .box {
      background-color: #c00000;
    }

    .thinkList {
      font-size: 12px;

      .item {
        display: flex;
        justify-content: space-between;
        padding: 20rpx;
        border-bottom: 1px solid #f3f3f3;

        text {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .history {
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;
      padding: 0 20rpx;
      border-bottom: 1px solid #f3f3f3;
    }

    .itembox {
      display: flex;
      flex-wrap: wrap;

      .item {
        padding: 6rpx 10rpx;
        background-color: #ccc;
        margin: 20rpx;
      }
    }
  }
</style>